<template>
  <view class="container">
    <!-- 左侧筛选分类 -->
    <view class="sidebar">
      <view
        v-for="category in categories"
        :key="category"
        :class="['category', { active: activeCategory === category }]"
        @click="handleCategoryClick(category)"
      >
        {{ category }}
      </view>
    </view>

    <!-- 右侧选项列表 -->
    <scroll-view
      ref="scrollViewId"
      class="options"
      scroll-y
      :scroll-top="scrollTop"
      @scroll="handleScroll"
    >
      <view
        v-for="(optionGroup, index) in optionGroups"
        :key="index"
        :id="`section-${index}`"
        class="option-section"
      >
        <view class="section-title">{{ categories[index] }}</view>
        <view
          v-for="option in optionGroup"
          :key="option"
          :class="['option', { selected: filters[categories[index]] === option }]"
          @click="selectOption(categories[index], option)"
        >
          {{ option }}
        </view>
      </view>
	  <!-- 添加额外的空白区域 -->
	        <view class="extra-padding"></view>
    </scroll-view>

    <!-- 确定按钮 -->
    <view class="confirm-button" @click="confirmFilters">
      确定
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 左侧分类
      categories: ["学历", "薪资", "经验", "公司规模", "融资", "行业"],
      // 当前选中的分类
      activeCategory: "学历",
      // 筛选条件
      filters: {
        学历: "",
        薪资: "",
        经验: "",
        公司规模: "",
        融资: "",
        行业: "",
      },
      // 选项数据
      educationOptions: ["不限", "初中以下", "中专/中技", "高中", "大专", "本科", "硕士", "博士"],
      salaryOptions: ["不限", "4k以上", "5-10k", "10-20k", "20-50k", "50k以上"],
      experienceOptions: ["不限", "在校生", "应届生", "1年以内", "1-3年", "3-5年", "5-10年", "10年以上"],
      companySizeOptions: ["不限", "0-20人", "20-99人", "100-499人", "500-999人", "1000-9999人", "10000人以上"],
      financingOptions: ["不限", "未融资", "天使轮", "A轮", "B轮", "C轮", "D轮及以上", "已上市"],
      industryOptions: ["不限", "互联网", "金融", "教育", "医疗", "制造业", "服务业", "文化娱乐", "房地产", "其他"],
      // 滚动位置
      scrollTop: 0,
      // 选项分组
      optionGroups: [],
      // 选项组的顶部偏移量
      sectionTops: [],
    };
  },
  mounted() {
    // 初始化选项分组
    this.optionGroups = [
      this.educationOptions,
      this.salaryOptions,
      this.experienceOptions,
      this.companySizeOptions,
      this.financingOptions,
      this.industryOptions,
    ];
    // 初始化选项组的顶部偏移量
    this.calculateSectionTops();
  },
  methods: {
    // 计算每个选项组的顶部偏移量
    calculateSectionTops() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        let tops = [];
        let optionsTop;

        // 首先获取 .options 容器的顶部位置
        query.select('.options').boundingClientRect((res) => {
          if (res) {
            optionsTop = res.top;

            // 然后遍历所有 section 获取它们的顶部位置
            this.categories.forEach((_, index) => {
              query.select(`#section-${index}`).boundingClientRect((sectionRes) => {
                if (sectionRes) {
                  // 计算相对于 .options 容器顶部的位置
                  tops[index] = sectionRes.top - optionsTop;

                  // 如果已经处理完所有 sections，则更新 sectionTops
                  if (tops.filter(t => t !== undefined).length === this.categories.length) {
                    this.sectionTops = tops;
                  }
                }
              }).exec();
            });
          }
        }).exec();
      });
    },
    // 处理左侧菜单点击
    handleCategoryClick(category) {
      this.activeCategory = category;
      const index = this.categories.indexOf(category);
      // 确保 sectionTops 已初始化
      if (this.sectionTops.length > 0) {
        this.scrollToSection(index);
      } else {
        // 如果 sectionTops 未初始化，延迟执行
        setTimeout(() => {
          this.scrollToSection(index);
        }, 100);
      }
    },
    // 滚动到指定分类
    scrollToSection(index) {
      this.activeCategory = this.categories[index];
      this.$nextTick(() => {
		  const top = this.sectionTops[index];
		  this.scrollTop = top - this.sectionTops[0]; // 计算相对顶部的滚动距离
        // this.scrollTop = this.sectionTops[index]; // 使用 scrollTop 来滚动到指定位置
      });
    },
    // 处理右侧滚动事件
    handleScroll(event) {
      const scrollTop = event.detail.scrollTop;
      if (this.sectionTops.length === 0) return; // 如果 sectionTops 未初始化，直接返回

      let lastValidIndex = 0; // 默认选中第一个分类

      for (let i = 0; i < this.sectionTops.length; i++) {
        if (
          scrollTop >= this.sectionTops[i] && 
          (scrollTop < this.sectionTops[i + 1] || i === this.sectionTops.length - 1)
        ) {
          lastValidIndex = i;
          break;
        }
      }

      // 检查当前 activeCategory 是否需要更新
      if (this.categories[lastValidIndex] !== this.activeCategory) {
        this.activeCategory = this.categories[lastValidIndex];
      }
    },
    // 选择选项
    selectOption(type, option) {
      this.filters[type] = option;
    },
    // 确认筛选条件
    confirmFilters() {
      uni.navigateBack({
        success: () => {
          const pages = getCurrentPages();
          const prevPage = pages[pages.length - 1];
          prevPage.$vm.updateFilters(this.filters);
        },
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  background-color: #fff;
  height: 100vh;
}

/* 左侧菜单栏固定定位 */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 95px;
  background-color: #ececec;
  overflow-y: auto; /* 如果菜单项过多，允许滚动 */
}

.category {
  padding: 10px 10px 20px 20px;
}

.category.active {
  background-color: #fff;
  color: #2F318B;
}

/* 右侧选项栏滚动 */
.options {
  margin-left: 95px; /* 左侧菜单栏宽度 */
  flex: 1;
  background-color: #fff;
  height: calc(100vh - env(safe-area-inset-bottom)); /* 根据设备底部安全区域调整 */
  overflow-y: auto;
}

/* 添加额外的空白区域以允许最后一个选项组滚动到顶部 */
.extra-padding {
  height: 600px; /* 根据需要调整高度 */
}

/* 在最后一个选项组之后添加额外的 padding 或 margin-bottom */
.option-section:last-child {
  margin-bottom: calc(env(safe-area-inset-bottom) + 60px); /* 根据底部按钮的实际高度和设备底部安全区域调整 */
}

.option-section {
  padding: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.option {
  display: inline-block;
  width: 118px;
  height: 31px;
  line-height: 31px;
  border-radius: 4px;
  background: #ECECEC;
  text-align: center;
  margin: 0 0 10px 10px;
}

.option.selected {
  background-color: #007aff;
  color: white;
}

/* 确定按钮固定定位 */
.confirm-button {
  position: fixed;
  bottom: 0;
  left: 95px; /* 左侧菜单栏宽度 */
  right: 0;
  padding: 15px;
  background-color: #007aff;
  color: white;
  text-align: center;
}
</style>